<script setup lang="ts">
import request from "@api";
import { reactive, ref } from "@vue/reactivity";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
const props = defineProps({
  id: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits({
  initData: null,
});

const $router = useRouter();

let condition = reactive({
  id: props.id,
  pageSize: 10,
  pageNum: 1,
});

let list = ref([]);
let total = ref(0);

function getBlogListByUserId() {
  request["check/getCollectList"]({
    params: condition,
  }).then((res: any) => {
    if (res.code == 200) {
      list.value = res.data.list;
      total.value = res.data.total;
      condition.pageNum = res.data.pageNum;
      condition.pageSize = res.data.pageSize;
    }
  });
}
function sizeChange(val: number) {
  condition.pageSize = val;
  getBlogListByUserId();
}

function currentChange(val: number) {
  condition.pageNum = val;
  getBlogListByUserId();
}

function toDetail(row: any) {
  $router.push({
    name: "blogDetail",
    params: {
      id: row.id,
    },
  });
}

function handlerDelete(row: any) {
  ElMessageBox.confirm("确认要删除嘛？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request["check/deleteRowByid"]({ data: { id: row.id } }).then(
        (res: any) => {
          if (res.code == 200) {
            ElNotification({
              type: "success",
              message: res.msg,
              showClose: false,
            });
            emit("initData");
            getBlogListByUserId();
          } else {
            ElNotification({
              type: "error",
              message: res.msg,
              showClose: false,
            });
          }
        }
      );
    })
    .catch(() => {});
}
function handlerCancel(row: any) {
  ElMessageBox.confirm("确认要取消嘛？", "取消确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request["check/operateCollect"]({
        data: { id: row.blog.id, type: "0" },
      }).then((res: any) => {
        if (res.code == 200) {
          ElNotification({
            type: "success",
            message: res.msg,
            showClose: false,
          });
          emit("initData");
          getBlogListByUserId();
        } else {
          ElNotification({
            type: "error",
            message: res.msg,
            showClose: false,
          });
        }
      });
    })
    .catch(() => {});
}

getBlogListByUserId();
</script>

<template>
  <div class="blogs_box">
    <div class="list_box">
      <div
        class="item"
        v-for="row in list"
        :key="row.id"
        @click="toDetail(row)"
      >
        <div class="blog_title">
          {{ row.blog.blogTitle }}
          <div class="btn-box">
            <el-button size="small" @click.stop="handlerCancel(row)"
              >取消</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click.stop="handlerDelete(row)"
              >删除</el-button
            >
          </div>
        </div>
        <div class="blog_context">{{ row.blog.blogText }}</div>
        <div class="bottom_tool">
          <div class="publish">来源：{{ row.username || row.phoneNumber }}</div>
          <div class="create_time">时间：{{ row.blog.createTime }}</div>
          <div class="views">浏览：{{ row.blog.views }}次</div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="prev, pager, next , sizes , total"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.blogs_box {
  height: 100%;
  .list_box {
    height: calc(100% - 80px);
    overflow-y: auto;
    .item {
      &:hover {
        background-color: #ededed;
      }
      // padding: 10px 30px;
      padding-bottom: 10px;
      padding: 10px 30px;
      cursor: pointer;
      margin-bottom: 5px;
      border-bottom: 1px solid #ededed;
      .blog_title {
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        .el-button {
          font-size: 12px;
        }
      }
      .blog_context {
        margin: 5px 0;
        color: rgba(0, 0, 0, 0.8);
        text-indent: 2em;
        font-size: 14px;
        line-height: 18px;
        height: 36px;

        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
      .bottom_tool {
        display: flex;
        justify-content: space-around;
        font-size: 14px;
        color: #999;
      }
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}
</style>